<route lang="yaml">
meta:
  title: 主页
  icon: ant-design:home-twotone
</route>

<script setup lang="ts">
const tools = ref([
  {
    title: '去重工具',
    icon: 'i-heroicons-solid:document-arrow-down',
    description: '支持文本、数组等数据的去重处理',
    path: '#/string-deal/deduplicate',
  },
  {
    title: '常用正则',
    icon: 'i-mdi:regex',
    description: '获取常见正则语句',
    path: '#/regex-tool/common-regex',
  },
  {
    title: 'Agent配置',
    icon: 'i-ant-design:setting-twotone',
    description: '管理全局Agent配置信息',
    path: '#/agent-management/agent-config',
  },
  {
    title: 'Base64加解密',
    icon: 'i-mdi:code-braces',
    description: '进行Base64加解密',
    path: '#/string-deal/base64-tool',
  },
  {
    title: 'JWT解析器',
    icon: 'i-mdi:key-chain-variant',
    description: '解析JWT信息',
    path: '#/string-deal/jwt-tool',
  },
  {
    title: '进制转换',
    icon: 'i-mdi:numeric',
    description: '进行进制转换，二进制、十进制等',
    path: '#/string-deal/base-conversion',
  },
  // {
  //   title: '代码格式化',
  //   icon: 'i-ri:code-line',
  //   description: '支持多种编程语言的代码格式化',
  //   path: '/tools/code-format',
  // },
  // {
  //   title: '加密/解密',
  //   icon: 'i-ri:lock-line',
  //   description: '支持AES, DES, RSA等多种加密算法',
  //   path: '/tools/encrypt',
  // },
  // {
  //   title: '单位转换',
  //   icon: 'i-ri:exchange-line',
  //   description: '长度、重量、温度等单位转换',
  //   path: '/tools/unit-convert',
  // },
  // {
  //   title: '二维码生成',
  //   icon: 'i-ri:qr-code-line',
  //   description: '生成和解析二维码',
  //   path: '/tools/qrcode',
  // },
])

function navigate(path: string) {
  window.location.href = path
}
</script>

<template>
  <div>
    <FaPageHeader>
      <template #title>
        <div class="flex items-center gap-4">
          欢迎使用
        </div>
      </template>
      <template #description>
        <div class="text-sm/6">
          <div>
            这是一个实用工具集，提供一系列常用工具和功能
          </div>
        </div>
      </template>
    </FaPageHeader>

    <div class="grid grid-cols-1 gap-4 p-4 lg:grid-cols-3 md:grid-cols-2">
      <FaCard
        v-for="tool in tools"
        :key="tool.title"
        hoverable
        style="cursor: pointer;"
        @click="navigate(tool.path)"
      >
        <div class="flex items-center gap-4">
          <FaIcon :name="tool.icon" class="text-2xl" />
          <div>
            <h3 class="text-lg font-medium" style="margin-top: 20px;">
              {{ tool.title }}
            </h3>
            <p class="text-sm text-gray-500">
              {{ tool.description }}
            </p>
          </div>
        </div>
      </FaCard>
    </div>
  </div>
</template>

<style scoped>
.text-emphasis {
  text-emphasis-style: "❤";
}
</style>
